Integrating UI libraries with Svelte actions

Posted on 2023-04-02 by

henrikvilhelmberglund

Let's say we found a cool UI library with a datetime picker that we wanted to use. Could we integrate it with Svelte? Let's see.

Here is the datetimer picker we're going to use: https://flatpickr.js.org

Click the button to show the date picker!
<script>
  import flatpickr from "flatpickr";
	let button;
	$: button && flatpickr(button);
</script>

<button bind:this={button}>Date Picker</button>

<style>
</style>

The benefit of actions is that we can easily have **several buttons with datepickers.

This would be harder when binding to buttons since we would need a separate variable and function for each button.
<script>
  import flatpickr from "flatpickr";
	function datepicker(element) {
		flatpickr(element);
	}
</script>

<button use:datepicker>Date Picker</button>

<button use:datepicker>Date Picker</button>

<style>
</style>

Another benefit is that we can easily pass parameters .

We simply pass our config as an object inside the action, then pass the config to flatpickr() inside our function. Super easy!
<script>
  import flatpickr from "flatpickr";
	function datepicker(element, config) {
		flatpickr(element, config);
	}
</script>

<button use:datepicker={{ showMonths: 3 }}>Date Picker</button>

<button use:datepicker>Date Picker</button>

<style>
</style>

We can even have a variable that sets our config. We just need to implement update() in our action function.

We simply pass our config as an object inside the action, then pass the config to flatpickr() inside our function. Super easy!
<script>
  import flatpickr from "flatpickr";
	function datepicker(element, config) {
		const calender = flatpickr(element, config);

		return {
			update(newConfig) {
				calender.set("showMonths", newConfig.showMonths);
			},
		};
	}
	let showMonths = 3;
</script>

<input type="number" bind:value={showMonths} />

<button use:datepicker={{ showMonths }}>Date Picker</button>

<button use:datepicker>Date Picker</button>

<style>
</style>

We could also have a checkbox that uses the libraries methods to open and close itself. 

<script>
  import flatpickr from "flatpickr";
	function datepicker(element, open) {
		const calender = flatpickr(element);

		return {
			update(open) {
				if (open) {
					calender.open();
				} else {
					calender.close();
				}
			},
			destroy() {
				calender.destroy();
			},
		};
	}
	let checked = false;
</script>

<input type="checkbox" bind:checked />
<button use:datepicker={checked}>Datepicker</button>

<style>
</style>